<template>
    <div class="wrapper">
        <div class="title-item">{{title}}</div>
         <ul>
            <li :class="{active:$store.state.activeMenuId===menu.id}" 
            @click="$store.commit('setActiveMenuId',menu.id)"
            v-for="menu in $store.getters.tree"
             :key="menu.id">
               <span>{{menu.name}}</span>
            </li>
            <li>
                <el-dropdown>
                <span class="el-dropdown-link">
                    {{$store.state.user.username}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>修改</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown>
            </li>
         </ul>
    </div>
</template>

<script>
    export default {
        name:"Header",
        data() {
            return {
                /**
                 * 激活的id
                 */
                activeId:0,
                /**
                 * 标题
                 */
                title: process.env.VUE_APP_TITLE,
            }
        },
    }
</script>

<style lang="scss" scoped>
.wrapper{
    height: 60px;
    background: rgb(84, 92, 100);
    display: flex;
    justify-content: space-between;
    color: white;
    align-items: center;
    .title-item{
        padding: 0 20px;
        font-size: 20px;
        font-weight: 500;
    }
    ul{
        list-style: none;
        overflow: hidden;
        li{
            float: left;
            padding: 0 20px;
            cursor: pointer;
            height: 59px;
            line-height: 59px;
            transition: 0.3s;
            box-sizing: border-box;

            &:hover{
                background: rgb(67,74,80);
            }
            &.active{
                color: rgb(255, 208, 75);
                border-bottom:2px solid currentColor ;
            }
            ::v-deep .el-dropdown-link{
                color: white;
            }
        }
    }
}
</style>